<template>
	<view class="u-skeleton">
		
		<view class="wrap"> 
				<u-swiper :list="slides" name="img_url" height="320" class="u-skeleton-rect"></u-swiper>
				<!-- #ifdef H5 --> 
				<u-divider color="#ff9900" fontSize="35" margin-top="26">扫码体验安卓APP </u-divider>
				<view style="width: 100%;justify-content: center;display: flex;margin-top: 10rpx;">
				  <u-image width="300rpx" height="300rpx" :src="src" :lazy-load="true"></u-image>
				</view>
				<!-- #endif -->
				
				
				<!-- 使用推荐组件 -->
				<tj-goods :tjgoods="tjgoods"></tj-goods>
		</view>
		
		


		<u-tabs  :list="homeList" :is-scroll="false" :current="current" @change="change" class="tabs u-skeleton-rect" active-color="#ff9900"></u-tabs>


		<view class="goods">
			<u-row gutter="16">
				<u-col span="6" v-for="(goods, index) in goodsList" :key="index">
					<!-- 使用组件 -->
						<goods-card :goods="goods" @myClick="toPage"></goods-card>
						
				</u-col>
			</u-row>
			<!--引用组件 骨架屏-->
					<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '/static/Android.jpg',
				homeList:[
					{name:'全部'},
					{name:'销量'},
					{name:'推荐'},
					{name:'新品'},
				],
				current: 0,
				slides:[],
				goodsList:[{}, {}, {}, {}],
				tjgoods:[{}, {}, {}, {}, {}, {}],
				page:1,
				loading:false
			}
		},
		onLoad() {
			this.init()
			
		},
		methods: {
			change(index) {
				this.current = index;
				//判断选项卡
				this.goodsList = [{}, {}, {}, {}]
				this.page = 1
				this.init()
			},
			
			//获取数据
			async init() {
				//显示骨架屏
				this.loading = true
				
				const params = {
					page:this.page
				}
				if(this.current == 1) params.sales = 1
				if(this.current == 2) params.recommend = 1
				if(this.current == 3) params.new = 1
				const res = await this.$u.api.index(params)
				//有了数据，隐藏骨架屏
				this.loading = false
				this.slides = res.slides
				this.goodsList = this.goodsList.pop().title ? [...this.goodsList,...res.goods.data] : res.goods.data
				this.tjgoods = res.goods.data
			},
			//子组件需要跳转的页面
			toPage(id){
				this.$u.route({
					type:'navigateTo',  
					url:`/pages/cate/goodsdetail?id=${id}`
				})
			}
			
		},
		onReachBottom() {
			//下拉更多 重新获取数据，带上分页参数
			// this.$u.toast('下拉加载中...')
			uni.showToast({
				title:'加载中...',
				icon:'loading',
			})
			this.page = this.page + 1
			this.init()
		},
		
		
	}
</script>

<style lang="scss" scoped>
	.wrap {
			padding: 0 0 20rpx 0;
			color: $u-type-primary;
		}
	/* #ifdef H5 */
	.tabs{
		position: sticky;
		top: 80rpx;
		z-index: 999;
	}
	/* #endif */
	/* #ifndef H5 */
	.tabs{
		position: sticky;
		top: 0rpx;
		z-index: 999;
	}
	/* #endif */
	.goods {
			padding: 40rpx;
			
		}
	
	
</style>
